<script setup lang="ts">
import {reactive, watchEffect} from 'vue';
import AppHeader from 'comps/@lgs/AppHeader/AppHeader.vue';
import NoData from '@/components/@lgs/NoData/NoData.vue';
import {api} from "@/api/apiServer";
import Tools from '@likg/tools';

// -- props
interface TabProps extends API.ListProps<any[] | null> {
    queryFriendType: number; // 类型 1, 领取记录 2, 消费记录
}

interface StateProps {
    friendsDirect: TabProps;
    friendsIndirect: TabProps;
    active: number;
}

type TabKeyType = 'friendsDirect' | 'friendsIndirect';

// -- state
const state = reactive<StateProps>({
    friendsDirect: {
        page: 1,
        data: null,
        isRefreshing: false,
        isLoading: false,
        isFinished: false,
        type: 'refresh',
        queryFriendType: 1,
    },
    friendsIndirect: {
        page: 1,
        data: null,
        isRefreshing: false,
        isLoading: false,
        isFinished: false,
        type: 'refresh',
        queryFriendType: 2,
    },
    active: 0,
});

// -- constants
// 1. 微信环境 无导航栏
// 2. 非微信环境 有导航栏
const env = Tools.getEnv();
const showStatusBar = false;

// -- methods
const getDataSource = async (key: TabKeyType) => {
    try {
        let ajaxApi = key === 'friendsDirect' ? api.getPointsList : api.getCouponList;
        const resp = await ajaxApi({
            pageNum: state[key].page,
            pageSize: 10,
            pointType: 1
        });
        const {current, total, records} = resp.data;
        // 处理数据
        if (state[key].type === 'refresh' || state[key].data === null) {
            state[key].data = records;
            state[key].isRefreshing = false;
        } else {
            state[key].data = [...state[key].data!, ...records];
            state[key].isLoading = false;
        }
        state[key].isFinished = (state[key].data as any).length >= total;
    } catch (error) {
        console.log(error);
    }
};

// -- events
const onRefresh = (key: TabKeyType) => {
    state[key].page = 1;
    state[key].type = 'refresh';
    getDataSource(key);
};
const onLoad = (key: TabKeyType) => {
    state[key].page += 1;
    state[key].type = 'load';
    getDataSource(key);
};

// -- watchEffects
watchEffect(() => {
    switch (state.active) {
        case 0:
            state['friendsDirect'].data === null && getDataSource('friendsDirect');
            break;
        case 1:
            state['friendsIndirect'].data === null &&
            getDataSource('friendsIndirect');
            break;
    }
});
</script>

<template>
    <div class="page">
        <!-- 导航栏 -->
        <app-header v-if="env !== 'weixin'" title="能量明细" :showBack="true" :show-status-bar="showStatusBar"/>
        <!-- 内容 -->
        <van-pull-refresh v-model="state.friendsDirect.isRefreshing" @refresh="onRefresh('friendsDirect')">
            <template v-if="state.friendsDirect.data">
                <van-list v-model:loading="state.friendsDirect.isLoading" finished-text="没有更多了~"
                          :finished="state.friendsDirect.isFinished" :offset="60" :immediate-check="false"
                          @load="onLoad('friendsDirect')">
                    <template v-if="state.friendsDirect.data.length > 0">
                        <div class="item border-bottom px-15 py-20 mt-3" style="border-color: #97979720;"
                             v-for="(item, index) in state.friendsDirect.data" :key="index" :data="item">
                            <div>
                                <div v-if="item.consumerType=='1'" class="f15 f-500 mr-14 lh-20" style="color: #070707">
                                    领取能量
                                </div>
                                <div v-else-if="item.consumerType=='2'" class="f15 f-500 mr-14 lh-20" style="color: #070707">
                                    购物消费
                                </div>
                                <div v-else-if="item.consumerType=='3'" class="f15 f-500 mr-14 lh-20" style="color: #070707">
                                    购物退款
                                </div>
                                <div v-if="item.consumerType=='1'"  class="f14 mt-11" style="color: #7F8086">
                                    领取时间：{{ item.createTime }}
                                </div>
                                <div v-else-if="item.consumerType=='2'"  class="f14 mt-11" style="color: #7F8086">
                                    消费时间：{{ item.createTime }}
                                </div>
                                <div v-else-if="item.consumerType=='3'"  class="f14 mt-11" style="color: #7F8086">
                                    退款时间：{{ item.createTime }}
                                </div>
                            </div>
                            <div v-if="item.consumerType=='1'" class="f14 ff-DIN-Regular" style="color: #F59A23"> + {{ item.faceValue }} J</div>
                            <div v-else-if="item.consumerType=='2'" class="f14 ff-DIN-Regular" style="color: #F59A23"> - {{ item.faceValue }} J</div>
                            <div v-else-if="item.consumerType=='3'" class="f14 ff-DIN-Regular" style="color: #F59A23"> +  {{ item.faceValue }} J</div>
                        </div>
                    </template>
                    <no-data v-else/>
                </van-list>
            </template>
            <van-loading v-else color="#F59A23" vertical>加载中...</van-loading>
        </van-pull-refresh>
    </div>
</template>

<style lang="less" scoped>
.van-pull-refresh {
    min-height: 600px;
}

:deep(.van-tabs__wrap) {
    position: fixed;
    left: 0;
    z-index: 999;
    width: 100%;
}

:deep(.van-tabs__content) {
    //   margin-top: 60px;
    margin-top: calc(var(--van-tabs-line-height) + 10px);
}

.van-loading {
    margin-top: 120px;
}

.item {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
</style>
